<template>
    <div class="Dynamic">
        <div class="mask">

        </div>
        <div class="content">
           <router-link to="/index/my">
               <div class="arrow">
                   <span></span>
               </div>
           </router-link>
            <h1>OMINI.BASS</h1>
            <h3>12条动态</h3>
            <section>
                    <span>1小时前</span>
                    <div>
                        <img src="~@/assets/img/my/circle.png" alt="">
                        <span></span>
                    </div>
                    <span>
                        国家一级健身教练,主修健美、健体、游泳专业,曾连续获得多次国家组织的健美大赛奖项。国家一级健身教练,主修健美、健体、游泳专业.
                        <div>
                            <img src="~@/assets/img/my/women.jpeg" alt="">
                            <img src="~@/assets/img/my/foot.jpeg" alt="">
                        </div>
                    </span>
            </section>
            <section>
                    <span>3天前</span>
                <div>
                    <img src="~@/assets/img/my/circle.png" alt="">
                </div>

                <span>
                        累嗝屁了！
                     <div>
                            <img src="~@/assets/img/my/women2.jpeg" alt="">
                        </div>
                    </span>
            </section>
            <section>
                    <span>9月11日</span>
                <div>
                    <img src="~@/assets/img/my/circle.png" alt="">
                </div>

                <span>
                        我创建了一个课程,来挑战下吧！
                     <div>
                            <img src="~@/assets/img/my/foot.jpeg" alt="">
                        </div>
                    </span>
            </section>
            <section>
                    <span>9月1日</span>
                <div>
                    <img src="~@/assets/img/my/circle.png" alt="">
                </div>

                <span>
                    加入了FITNESS大家庭~
                    </span>
            </section>

        </div>

    </div>
</template>

<script>
    export default {
        name: "Dynamic"
    }
</script>

<style lang="stylus" scoped>
.Dynamic
  color #ffffff
  padding 0.2rem
  width 100vw
  height 100vh
  background url("~@/assets/img/my/women.jpeg") no-repeat center
  background-size 300vw 100vh
  position relative
  font-size 0.12rem

  .mask
     width 100vw
     height 100vh
     position absolute
     top 0
     left 0
     opacity 0.3
     background-color black
  .content
    position absolute
    z-index 3

    section
      padding 0.2rem  0.12rem 0 0.12rem
      display flex

      span:nth-child(1)
        flex 2

      > div
        margin -0.09rem 0.05rem 0 -0.08rem
        flex 1
          span
            position absolute
            width 10.02rem
            height 1.35rem
            top 0
            left 0
            background-color #6B5CEB
      span:nth-child(3)
        flex 8
        > div
            padding-top 0.15rem
            img
              padding-right 0.06rem
              height 0.7rem
              width 0.8rem


    h1
     padding-top 0.08rem
     font-size 0.32rem
    h3
      color #ffffff
      font-size 0.15rem
    .arrow
      width 0.35rem
      height 0.35rem
      background-color #8374F2
      box-shadow: 0 2px 15px rgba(0,0,0,.15);
      border-radius 50%
      position relative
      cursor pointer

      span
        background-color transparent
        width 0.12rem
        height 0.12rem
        border-left 0.025rem solid  #F8F7FD
        border-bottom 0.025rem solid #F8F7FD
        transform rotate(45deg)
        position absolute
        left 0.13rem
        top 0.11rem
</style>